<template>
  <u-popup
    v-model="show"
    mode="center"
    width="90%"
    height="60%"
    border-radius="20"
    :closeable="true"
    :duration="0"
  >
    <view class="poup">
      <view class="poup-title">
        <view>{{ goodsTitle }}</view>
        <view>规格</view>
      </view>

      <view class="goods-list">
        <scroll-view scroll-y="true" style="height: 100%" class="scroll-Y">
          <view
            v-for="(item, index) in goodsList"
            :key="index"
            class="kind-item"
          >
            <view class="foods-name">{{ item.title }}</view>
            <view class="goods-stock">库存：{{ item.storage }}</view>
            <view class="goods-stock">
              <u-tag
                :text="item.min_number + '件起售'"
                :closeable="false"
                size="mini"
                type="error"
                mode="dark"
                :style="{ marginRight: '10rpx' }"
              />
              <u-tag
                v-if="item.package_type_id == 1 ? false : true"
                :text="'邮费' + item.freight / 100 + '元'"
                :closeable="false"
                size="mini"
                type="warning"
                mode="dark"
              />
            </view>

            <view class="price">
              <view class="true-price">
                <view>￥{{ item.cost / 100 }}</view>
                <view>￥{{ item.sale_price / 100 }}</view>
                <!-- <u-tag
                  :text="item.min_number + '件起售'"
                  :closeable="false"
                  size="mini"
                  type="error"
                  mode="dark"
                /> -->
              </view>
              <view class="buy-num" v-if="item.storage == 0 ? false : true">
                <view
                  class="iconfont icon-jian jian"
                  @click="reduceBuyCount(item, index)"
                ></view>
                <view class="num">{{ numberList[index].number }}</view>
                <view
                  class="iconfont icon-add-fill jia"
                  @click="addByCount(item, index)"
                ></view>
              </view>
              <view class="buy-num" v-else style="color: red"> 已售馨</view>
            </view>
          </view>
        </scroll-view>
      </view>

      <view class="buy">
        <u-button :custom-style="customStyle" :ripple="true" @click="addCar"
          >加入进货单</u-button
        >
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      customStyle: {
        color: "#FFFFFF",
        backgroundColor: "#D65C45",
      },
      goodsTitle: "",
      cover: "", //该规格的商品的tupian
      goodsList: [], //规格list
      numberList: [], //进货数量
    };
  },
  methods: {
    /**
     * 添加 进货规格 数量
     */
    addByCount(info, index) {
      // 添加 最小数量
      if (this.numberList[index].number + info.min_number > info.storage) {
        this.$u.toast("库存不足");
      } else {
        this.numberList[index].number += info.min_number;
      }
      console.log(this.numberList);
    },

    /**
     * 减少  进货规格 数量
     */
    reduceBuyCount(info, index) {
      if (this.numberList[index].number - info.min_number >= 0) {
        this.numberList[index].number -= info.min_number;
      }
    },

    /**
     * 加入进货单
     */
    addCar() {
      // 加入 存在的订单
      this.numberList.map((v, index) => {
        if (this.$parent.jugeGoodsExit(v.goods_item_id)) {
          // 遍历查是否存在
          this.$parent.storeOrderList.forEach((element, index1) => {
            if (element.goods_item_id === v.goods_item_id) {
              this.$parent.storeOrderList[index1].number = v.number;
            }
          });
        } else {
          // 不存在 就往 订货list 添加
          var form = {
            goods_item_id: v.goods_item_id,
            goods_id: v.goods_id,
            cover: this.cover,
            number: v.number,
            info: this.goodsList[index], //商品信息
            package_type_id: v.package_type_id,
            freight: v.freight,
          };
          this.$parent.storeOrderList.push(form);
        }
      });
      this.show = false;
    },
  },
};
</script>

<style scoped lang ='scss' >
@mixin flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.poup {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  .poup-title {
    height: 130rpx;
    padding: 30rpx;
    & > view:nth-child(1) {
      color: #333333;
      font-weight: blod;
      font-size: 30rpx;
      margin-bottom: 20rpx;
    }
    & > view:nth-child(2) {
      color: #333333;
      font-size: 24rpx;
    }
  }
  .goods-list {
    flex: 1;
    overflow-y: scroll;
    .kind-item {
      margin-top: 20rpx;
      .foods-name {
        margin-left: 40rpx;
        color: #333333;
        font-size: 30rpx;
      }
      .goods-stock {
        color: #333333;
        font-size: 24rpx;
        margin-top: 10rpx;
        margin-left: 40rpx;
      }

      .price {
        @include flex-row;
        padding: 10rpx 36rpx 30rpx 36rpx;
        border-bottom: 1rpx solid #e6e6e6;
        .true-price {
          @include flex-row;
          & > view:nth-child(1) {
            color: #d65c45;
            font-size: 32rpx;
            font-weight: bold;
            margin-right: 10rpx;
          }
          & > view:nth-child(2) {
            color: #999999;
            font-size: 24rpx;
            text-decoration: line-through;
            margin-right: 20rpx;
          }
        }
        .buy-num {
          @include flex-row;
          .jian {
            color: #dcdcdc;
            font-size: 48rpx;
            margin-right: 20rpx;
          }
          .jia {
            color: #d65c45;
            font-size: 50rpx;
            margin-left: 20rpx;
          }
          .num {
            color: #333333;
            font-size: 28rpx;
            font-weight: bold;
          }
        }
      }
    }
  }

  .buy {
    bottom: 0;
    margin: 20rpx;
    height: 100rpx;
  }
}
</style>
